<template>
  <div>
    <!-- 面包屑 -->
    <div style="margin-bottom: 10px;">
      <a-breadcrumb>
        <a-breadcrumb-item href="">
          <a-icon type="home"/>
          首页
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          供应商审核
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <!-- 搜索框 -->
    <div style="width: 400px;display: flex;justify-content: space-between">
      <a-input placeholder="供应商编号" v-model="queryParams.supplierCode" style="width: 150px"/>
      <a-select default-value="0" style="width: 120px" @change="handleChange">
        <a-select-option value="">
          全部
        </a-select-option>
        <a-select-option value="0">
          未审核
        </a-select-option>
        <a-select-option value="1">
          正常
        </a-select-option>
      </a-select>
      <a-button type="primary" @click="onSearch" icon="search" style="width:85px;color: white">
        查询
      </a-button>
      <br/><br/>
    </div>
    <!-- 查询数据表格 -->
    <a-table
        :columns="columns"
        :data-source="suppliers"
        :scroll="{y: 600}"
        :loading="loading"
        :pagination="pagination"
        :current="pagination.current"
        @change="tableChange"
        bordered
        style="align-content: center"
    >
      <template slot="operation" slot-scope="record">
        <div style="display: flex;justify-content: space-around">
          <a-button @click="showDrawer(record,false)" type="primary" style="width: 65px">
            详情
          </a-button>
          <a-button v-if="record.accountStatus === 0" @click="showDrawer(record,true)" type="primary"
                    style="width: 65px">
            审核
          </a-button>
        </div>
      </template>
    </a-table>

    <div>
      <a-drawer placement="right" width="640" :closable="false" :visible="visible" :get-container="false"
                :wrap-style="{ position: 'absolute' }" @close="onClose">
        <p :style="pStyle">供应商信息</p>
        <a-divider/>
        <a-row>
          <p :style="pStyle1">供货商名称</p>
          <p :style="pStyle2">{{ selectRow.supplierName }}</p>
        </a-row>
        <a-row>
          <p :style="pStyle1">供货商编码</p>
          <p :style="pStyle2">{{ selectRow.supplierCode }}</p>
        </a-row>
        <a-row>
          <p :style="pStyle1">供货商联系电话</p>
          <p :style="pStyle2">{{ selectRow.supplierTel }}</p>
        </a-row>
        <a-row>
          <p :style="pStyle1">供货商联系地址</p>
          <p :style="pStyle2">{{ selectRow.supplierAddress }}</p>
        </a-row>
        <a-row>
          <p :style="pStyle1">营业执照编号</p>
          <p :style="pStyle2">{{ selectRow.supplierLicenseNumber }}</p>
        </a-row>
        <a-row>
          <p :style="pStyle1">账户当前状态</p>
          <p :style="pStyle2" v-if="selectRow.accountStatus === 0">未审核</p>
          <p :style="pStyle2" v-else-if="selectRow.accountStatus === 0">正常</p>
          <p :style="pStyle2" v-else-if="selectRow.accountStatus === 0">已冻结</p>
        </a-row>
        <a-row>
          <p :style="pStyle1">营业执照图片</p>
          <img :src="imgUrl" alt="未提交营业执照图片"/>
        </a-row>
        <a-divider/>

        <div v-if="auditFlag===false">
          <a-button type="primary" @click="onClose" style="display: block;width: 120px">
            关闭
          </a-button>
        </div>
        <div v-else-if="auditFlag===true">
          <a-form :form="form" @submit="onSubmit">
            <a-form-item layout="inline" label="选择审核结果" style="width: 150px">
              <a-select placeholder="审核结果" default-value="1" v-model="checkMsg.status">
                <a-select-option value="1">通过审核</a-select-option>
                <a-select-option value="3">审核失败</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item layout="inline" label="审核反馈" v-model="checkMsg.msg">
              <a-textarea placeholder="审核反馈内容，审核失败时填写" :rows="4"/>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" style="display: block;width: 120px">
                提交审核结果
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-drawer>
    </div>
  </div>
</template>

<script>
import * as supplierService from '@/services/supplier/supplier.js'

const columns = [
  {title: '供应商名称', width: '20%', dataIndex: 'supplierName', key: 'supplierName', align: 'center'},
  {title: '供应商编码', width: '15%', dataIndex: 'supplierCode', key: 'supplierCode', align: 'center'},
  {title: '联系电话', width: '15%', dataIndex: 'supplierTel', key: 'supplierTel', align: 'center'},
  {title: '联系地址', width: '35%', dataIndex: 'supplierAddress', key: 'supplierAddress', align: 'center'},
  {
    title: '操作',
    width: '15%',
    align: 'center',
    key: 'operation',
    scopedSlots: {customRender: 'operation'}
  }
];


export default {
  name: 'SupplierInfo',
  data() {
    return {
      suppliers: [],
      columns,
      loading: false,
      form: this.$form.createForm(this),
      queryParams: {
        supplierCode: '',
        supplierStatus: '0',
      },
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 10,
      },
      visible: false,
      selectRow: [],
      auditFlag: false,
      imgUrl: '',
      pStyle: {
        fontSize: '20px',
        color: 'rgba(0,0,0,0.85)',
        lineHeight: '24px',
        display: 'block',
        marginBottom: '16px',
      },
      pStyle1: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.65)',
        lineHeight: '20px',
        float: 'left',
        display: 'inline-block',
      },
      pStyle2: {
        fontSize: '16px',
        color: 'rgba(0,0,0,0.55)',
        float: 'left',
        display: 'inline-block',
        marginLeft: '30px'
      },
      checkMsg: {
        code: '',
        status: '',
        msg: ''
      },

    };
  },
  created() {
    this.renderTableData();
  }
  ,
  methods: {
    async renderTableData() {
      this.loading = true;
      let resp = await supplierService.getAll(this.queryParams.supplierStatus, this.queryParams.supplierCode);
      this.loading = false;
      this.suppliers = resp;
      console.log("供应商列表" + this.suppliers)
    },
    onSearch() {
      this.renderTableData();
    },
    tableChange(e) {
      this.pagination.current = e.current
    },
    handleChange(value) {
      // console.log(`selected ${value}`);
      this.queryParams.supplierStatus = value;
    },
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer(record, flag) {
      this.visible = true;
      this.selectRow = record;
      this.auditFlag = flag;
      this.imgUrl = record.supplierLicensePicture;
    },
    onClose() {
      this.visible = false;
    },
    onSubmit() {
      this.checkMsg.code = this.selectRow.supplierCode;
      let resp = supplierService.updateStatus(this.checkMsg).then()

    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
}
;
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
